<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
  <el-form class="right-common-list">
    <dropdown-normal v-model="commonAttr.itemType" :valLists="COMMON_ITEM_TYPES" label="列表组件类型"  @change="onChangeAttr"></dropdown-normal>
    <!-- css属性 -->
    <color-normal  v-model="commonAttr.color" label="字体颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
    <slider-normal v-model="commonAttr.fontSize" label="字体大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
    <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
    <dropdown-normal label="列数" :valLists="COLUMN_NUM" v-model="commonAttr.columnNum" @change="onChangeAttr"></dropdown-normal>
    <dropdown-normal label="文本行数" :valLists="LINE_NUM" v-model="commonAttr.lineNum" @change="onChangeAttr"></dropdown-normal>
    <input-normal label="边距" placeholder="上 右 下 左" v-model="commonAttr.margin" @change="onChangeAttr"></input-normal>
    <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
    <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :isCrop="true" :isDelete="true" class="margin-left-right-16"></add-img-con>
    <input-normal label="图片地址" v-model="commonAttr.bgUrl" @change="onChangeAttr"></input-normal>
    <!-- 列表项设置 -->
    <el-divider content-position="center">列表项设置</el-divider>
    <input-normal label="项宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
    <input-normal label="项高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
    <!-- 投票 排序 -->
    <template v-if="isDislayCommonList">
      <switch-normal v-if="isVoteEvent || isRankFriendEvent" label="排序" v-model="commonAttr.isSort" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isShiftInArr" label="添加数据顶部" @change="onChangeAttr"></switch-normal>
      <el-button type="primary"  @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10 margin-top-10"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
          <template #title>
            列表项{{index+1}}
            <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <div class="margin-top-10">
            <textarea-normal label="" placeholder="请在此处输入标题" v-model="item.title" @change="onUpdateItem(index)"></textarea-normal>
            <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
            <input-normal label="图片" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
            <add-img-con :url="item.otherUrl" picAttr="otherUrl" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
            <input-normal label="其他图片" placeholder="这个属性可以提供给发博，或是数据绑定图片组件使用" v-model="item.otherUrl" @change="onUpdateItem(index)"></input-normal>
            <textarea-normal label="显示内容" placeholder="请在此处输入内容" v-model="item.text" @change="onUpdateItem(index)"></textarea-normal>
            <input-normal label="跳转链接" v-model="item.link" @change="onUpdateItem(index)"></input-normal>
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>
  </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import SubmitButton from '@/views/components/submit-button.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import { mapState, mapActions } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'
  import { COLUMN_NUM, LINE_NUM, BG_POSITION_REPEAT_TYPES } from '@/common/const'
  import { COMMON_ITEM_TYPE_MAP, COMMON_ITEM_TYPES } from '@/const/'
 
  export default {
    mixins: [editUtils],
    setup () {
      return {
        COMMON_ITEM_TYPE_MAP,
        COMMON_ITEM_TYPES,
        COLUMN_NUM: COLUMN_NUM,
        LINE_NUM:LINE_NUM,
        BG_POSITION_REPEAT_TYPES:BG_POSITION_REPEAT_TYPES,
      }
    },
    components: {
      RightTemplate,
      ColorNormal,
      TextareaNormal,
      AddImgCon,
      DropdownNormal,
      SliderNormal,
      SwitchNormal,
      SubmitButton,
      InputNormal,
    },
    computed: {
      ...mapState({
        controls: (state) => state.wbComponents.controls,
      }),
      isVoteEvent(){
        return this.componentData.events.vote ? true : false
      },
      isRankFriendEvent(){
        return this.componentData.events.rankFriend ? true : false
      },
      isUserInfo(){
        return this.componentData.events.reposts || this.componentData.events.user ? true : false
      },
    },
    mounted(){
    },
    methods: {
      ...mapActions({
      }),
      onChangeItemType(){
        this.onChangeAttr({commonAttr: this.commonAttr})
      }
    },
  };
</script>
